<template>
  <div class="chat-container">
    <!-- 消息数 -->
    <div class="chat-info">
      <ChatInfo :infoData="newInfoData" :load="load"></ChatInfo>
    </div>
    <!-- 输入框 -->
    <div class="chat-text">
      <textarea :disabled="load" class="chat-input" placeholder="输入内容按回车以发送.." @keydown.enter="inputChange"
        v-model="textValue"></textarea>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { scrollBottom } from '@/utils/chat'
import ChatInfo from './components/chat-info.vue';

defineOptions({
  name: "chatIndex"
})

const emit = defineEmits(['newInfoChange']);
const props = defineProps({
  infoData: {
    type: Array,
    default: () => []
  },
  load: {
    type: Boolean,
    default: false
  }
})

const newInfoData = ref(JSON.parse(JSON.stringify(props.infoData)))
const textValue = ref('')

let timer = 0
const inputChange = () => {
  if (textValue.value.length >= 2000) {
    ElMessage({ message: '一段文本最大2000字哦', type: 'warning' })
    setTimeout(() => textValue.value = textValue.value.slice(0, -1));
    return
  }

  if (!textValue.value.trim()) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      ElMessage({ message: '空文本', type: 'warning' })
      setTimeout(() => textValue.value = '');
    }, 400);
    return
  }

  /**
   * value: 输入值
   * isMe: 是否是自己发送的
   * time: 发送消息的时间戳
   */
  const newInfo = {
    value: textValue.value,
    isMe: true,
    time: Date.now()
  }
  emit("newInfoChange", newInfo)
  newInfoData.value.push(newInfo);

  setTimeout(() => {
    textValue.value = ''
    scrollBottom()
  })
}

const useTextLoad = (cb, timer = 500) => {
  let number = 1;
  const tId = setInterval(() => {
    const str = ".".repeat(number)
    cb && cb(str);
    if (number >= 3) {
      number = 1;
    } else {
      number++;
    }
  }, timer)

  return () => {
    clearInterval(tId);
  }
}

let tempInfo = {};
let clearTimer;
watch(() => props.load, value => {
  if (value) {
    const info = {
      isMe: false,
      time: Date.now(),
      value: "..."
    }
    newInfoData.value.push(info)
    clearTimer = useTextLoad((str) => {
      newInfoData.value.at(-1).value = str
    });
  } else {
    newInfoData.value.at(-1).value = tempInfo.value
    clearTimer()
  }
})

// 添加一个对话
const addInfo = (info) => {
  tempInfo = info;
}

defineExpose({
  addInfo
})

</script>

<style lang="scss" scoped>
.chat-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 10px;

  // 消息列表
  .chat-info {
    flex: 1;
    overflow-y: auto;
    padding: 10px;

    .load {
      text-align: center;
      color: lightseagreen;
      font-size: 13px;
    }
  }

  // 输入框
  .chat-text {
    width: 100%;
    min-height: 60px;
    padding: 0 30px;
    margin-bottom: 20px;

    .chat-input {
      border-radius: 20px;
      background-color: #02090a;
      margin: 0 -20px -14px;
      padding: 15px;
      resize: none;
      font-size: 13px;
      border: none;
      outline: none;
      width: calc(100% + 40px);
      height: 100%;
      word-break: break-all;
    }
  }
}
</style>